html{
    font-size: 1vw;
}
*{
    box-sizing: border-box;
}
html, body, #app{
    width: 100%;
    height: 100%;
    color: #ffffff;
}
html, body, p, h1, h2, h3, h4, h5, ul, li, button, input{
    margin: 0;
    outline: none;
}
.flex-center{
    display: flex;
    align-items: center;
    justify-content: center;
}
.flex-between{
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.flex-around{
    display: flex;
    align-items: center;
    justify-content: space-around;
}
.column-between{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.column-around{
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
}
.ellipsis{
    white-space: nowrap; /* 禁止换行 */
    overflow: hidden; /* 隐藏溢出内容 */
    text-overflow: ellipsis; /* 显示省略号 */
}



#app{
    overflow: auto;
    min-width: 1500px;
    background-image: url(./image/bgc.png);
    background-size: 100% 100%;
}
.header{
    /* display: flex;
    justify-content: center;
    align-items: center; */
    height: 4.5rem;
    margin-bottom: .5rem;
    padding: .4rem 1rem 0;
    font-size: 1.1rem;
    font-weight: bold;
    letter-spacing: .1em;
    background-image: url('./image/headBgc.png');
    background-size: 100% 100%;
    /* background: linear-gradient(180deg, #FFFFFF 19%, #01DFF9 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-fill-color: transparent; */
}
.header-mess{
    width: 22%;
    height: 100%;
    /* padding: 1.1rem 0; */
}
.header-mess-strip{
    width: .1rem;
    height: 40%;
    margin: 0 .5rem;
    background: #0A9CFF;
    opacity: 0.38;
}

.header-mess-currentTime{
    font-size: 1.5rem;
}

.toolbar{
    width: 100%;
    height: 2rem;
    padding: 0 .8rem;
    box-sizing: border-box;
}
.toolbar-date{
    height: 100%;
    padding: .1rem 0;
    box-sizing: border-box;
}
.el-range-input{
    height: 100% !important;
    font-size: .8rem !important;
    color: #ffffff !important;
}
.el-date-editor.el-input, .el-date-editor.el-input__wrapper {
    width: 12rem;
    height: 100%;
    background-color: transparent;
    /* border: 1px solid #0D53B7 !important; */
}
/* .el-date-range-picker{
    min-width: 40rem;
} */
.content{
    display: flex;
    justify-content: space-between;
    height: calc(100% - 5rem);
    padding: .3rem .8rem .8rem;
    box-sizing: border-box;
}

.content-left, .content-right{
    position: relative;
    width: 25%;
}
.content-charst-box, .center-charst-box{
    position: relative;
    width: 100%;
    height: 32%;
    padding: .5rem;
    box-sizing: border-box;
    background: rgba(20,149,250,0.1);
    box-shadow: 0px 0px 3.5rem 0px rgba(10,200,255,0.4);
    border-radius: .2rem;
    border: .1rem solid rgba(10,156,255,0.74);
}
.content-charst-boxMap{
    height: 50%;
    margin: 1rem 0;
}
.content-charst-boxMap-header{
    display: flex;
    align-items: center;
    justify-content: center;
    height: 3rem !important;
    font-size: 1.3rem;
}
/* 地图上面的计数器 */
.numBox{
    padding: .5rem;
    background: rgba(0,185,254,0.3);
    border: .1rem solid #00bafea1;
}
.numBox+.numBox{
    margin-left: .5rem;
}
.content-charst-boxMap-content{
    display: flex;
    width: 100%;
    height: calc(100% - 3rem);
}
/* 人才统计 */
.talentsNum{
    align-items: flex-start !important;
    width: 8rem;
    height: 4rem;
    padding: 1rem 0 1rem 2rem;
    font-size: 1rem;
    font-weight: 200;
    background-image: url('./image/talentsBGC.png');
    background-size: 100% 100%;
    box-sizing: border-box;
}
.talentsNum-total{
    font-size: 1.2rem;
    font-weight: bold;
    color: #FFF958 ;
}
.content-charst-boxMap-content-left{
    min-width: 20%;
    height: 100%;
    padding: 7% 0;
    box-sizing: border-box;
}
.content-charst-boxMap-content-right{
    position: relative;
    min-width: 80%;
    height: 100%;
}
#mapChinese{
    width: 100%;
    height: 100%;
}
/* 地图左边的展示 */
.content-charst-boxMap-content-right-sign{
    position: absolute;
    top: 50%;
    right: 0;
    align-items: flex-start;
    width: 9rem;
    height: 5rem;
    padding: 0 .5rem;
    background: #0000005e;
    border-radius: .1rem;
    transform: translateY(-50%);
}

/* 地区人才数 */
.citySort{
    align-items: flex-start !important;
    width: 100%;
    font-size: .9rem;
    font-weight: 200;
    transition: all .5s;
}
.citySort-num{
    font-weight: bold;
    color: #FFF958 ;
}

.content-charst-box-head{
    display: flex;
    align-items: center;
    white-space: nowrap;
    width: 100%;
    height: 1.5rem;
    line-height: 1.5rem;
    font-size: .9rem;
    font-weight: bold;
    letter-spacing: 0.1em;
}
.content-charst-box-head::after{
    content: '';
    display: inline-block;
    width: 60%;
    height: .8rem;
    margin: .1rem 0 0 .3rem;
    background-image: url('./image/toolbar.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
}
.content-charst-box-content{
    width: 100%;
    height: calc(100% - 1.5rem);
}
.el-col-12{
    height: 33.333%;
    padding-bottom: .5rem;
    box-sizing: border-box;
}
.content-charst-box-content-box{
    display: flex;
    align-items: center;
    justify-content: flex-start;
    height: 100%;
    padding: .4rem .8rem;
    background-image: url(./image/tj.png);
    background-size: 100% 100%;
    box-sizing: border-box;
}
.content-charst-box-content-box-progress{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 3.5rem;
    height: 100%;
    margin-right: 1rem;
}
.content-charst-box-content-box-text{
    text-align: center;
    font-size: .7rem;
    color: #FFFFFF;
}
.content-charst-box-content-box-text div{
    font-size: 1.4rem;
    color: #66FFFF;
}
.el-progress{
    width: 100%;
}
.el-progress-circle{
    width: 3rem !important;
    height: 3rem !important;
}
.percentage-value{
    color: #ffffff;
    font-size: 1rem;
    font-weight: bold;
}

.content-charst-box-content .el-row{
    /* height: 1.5rem; */
    padding: .3rem 0;
    border-bottom: .01rem solid #0E4093;
    font-size: .8rem !important;
}
/* .content-charst-box-content .el-row img{
    max-width: 1.5rem;
    max-height: 1.5rem;
} */

/* table */
.content-charst-box-content .el-col{
    color: #AFE3FE;
}
.content-charst-box-content-scoll .el-col{
    color: #ffffff;
}
.content-charst-box-content-scoll{
    overflow: auto;
    height: calc(100% - 1.5rem);

}
.content-charst-box-content-scoll::-webkit-scrollbar{
    display: none;
    width: 6px;
}
.content-charst-box-content-scoll::-webkit-scrollbar-thumb {
    background: #ccc;
    border-radius: 5px; 
}
/* Firefox 浏览器样式 */
.content-charst-box-content-scoll::-moz-scrollbar {
    display: none;
}
/* IE/Edge 浏览器样式 */
.content-charst-box-content-scoll::-ms-scrollbar{
    display: none;
}



.content-center{
    width: 48.5%;
    height: 100%;
}
.content-center-bottom, .content-center-top{
    width: 100%;
    height: calc(25% - 1rem);
}
.center-charst-box{
    height: 100%;
}
.center-charst-box+.center-charst-box{
    margin-left: 1rem;
}
.content-center-statistics{
    overflow: hidden;
    width: 100%;
    height: 10%;
}
.content-center-statistics-box{
    width: 16%;
    height: 100%;
    padding: .2rem 0 2rem;
    background-image: url(./image/statisticsBox1.png);
    background-size: 100% 100%;
    box-sizing: border-box;
}
.content-center-statistics-box-num{
    padding-bottom: .2rem;
    color: #ffffff;
    font-size: 1rem;
    font-weight: 900;
    line-height: normal;
}
.content-center-statistics-box-label{
    font-size: .6rem;
    font-weight: 200;
    font-variation-settings: "opsz" auto;
    color: #FFFFFF;
}
.content-center-toolbar{
    overflow: hidden;
    height: 30%;
    border: .1px solid transparent;
    box-sizing: border-box;
}
/* 第二行 */
.content-center-box{
    width: 50%;
    height: 100%;
    padding: .5rem;
    box-sizing: border-box;
}
.el-select__placeholder{
    color: #ffffff;
}
.el-select__wrapper{
    background-color: transparent;
}
.content-center-box-header{
    height: 10%;
    padding-bottom: .5rem;
    font-weight: bold;
}
#basicCourse, #featuredCourse, #praiseRadarMap, #radarMap{
    /* width: 100%; */
    /* height: 24vh; */
    height: calc(90% - .5rem);
}
#praiseRadarMap{
    width: 100%;
}

/* 课后风采 */
.content-center-mien{
    position: relative;
    height: 30%;
    padding: .3rem;
    background-image: url(./image/exhibitionBox.png);
    background-size: 100% 100%;
    box-sizing: border-box;
}
.content-center-mien-header{
    height: 10%;
    padding: .5rem;
    color: #19ECFF;
}
.content-center-mien-header span{
    position: relative;
    display: inline-block;
    padding-bottom: .5rem;
    font-size: 1.1rem;
    font-weight: bold;
    box-sizing: border-box;
}
.content-center-mien-header span::before{
    content: '';
    position: absolute;
    bottom: .1rem;
    left: 0;
    height: .25rem;
    width: 100%;
    background: linear-gradient(90deg, rgba(0, 255, 244, 0) 10%, #00FFF4 45%, rgba(0, 255, 244, 0) 80%);
}
.content-center-mien-iamge{
    overflow: hidden;
    height: calc(90% - 1rem);
    padding: .3rem;
    box-sizing: border-box;
}
.content-center-mien-iamge-scoll{
    position: relative;
    width: auto;
    display: inline-block;
    white-space: nowrap;
    height: 100%;
    font-size: 0;
    /* left: -100%; */
    animation: moving 10s linear infinite;
}
/* 动画效果 */
@keyframes moving {
    0% {
        transform: translateX(0); /* 从起始位置开始 */
    }
    100% {
        transform: translateX(-50%); /* 平移到一半 */
    }
}
/* .content-center-mien-iamge-scoll img{
    max-width: 100;
    height: 100%;
    border-radius: .5rem;
    box-sizing: border-box;
} */

.hotModel img{
    max-width: 100%;
    height: 1.2rem;
}

img+img{
    padding-left: .5rem;
}

.hottestIndust{
    height: 1.5rem;
    font-size: .7rem;
    font-weight: 200;
    color: #97C0F7;
}
.hottestIndust span{
    margin-left: .4rem;
    font-size: .9rem;
    font-weight: bold;
    color: #FFF958;
}